<template>
    <div class="password-find">
        <c-wrap title="找回密码" :bgColor="bgColor">
            <div class="card">
                <mt-field label="手机号码" placeholder="请填写手机号码" type="tel" v-model="user.name"></mt-field>
                <mt-field label="验证码" placeholder="6位验证码" readonly disableClear v-model="user.code">
                    <mt-button v-if="!showCount" plain
                               style="height: 20px;font-size: 14px;margin-right: 40px;color:#2699FB;"
                               @click="clickCode">点击获取
                    </mt-button>
                    <mt-button v-if="showCount" plain
                               style="height: 20px;font-size: 14px;margin-right: 40px;color: #707070;"
                    >{{count}}s
                    </mt-button>
                </mt-field>
                <mt-field label="重置密码" placeholder="6-20位字母数字组合" :type="passwordType"
                          v-model="user.password">
                </mt-field>
                <mt-button type="primary" @click="click" style="margin-top: 18px;height: 41px;font-size: 18px">确定
                </mt-button>
            </div>
        </c-wrap>
    </div>
</template>
<script>
    import CWrap from '../../components/CWrap'

    export default {
        components: {CWrap},
        data() {
            return {
                user: {
                    name: '',
                    code: '',
                    password: ''
                },
                count: 150,
                showCount: false,
                bgColor: '#E8E8E8',
                passwordType: 'password'
            }
        },
        watch: {
            'user.name': function (val) {
                if (this.user.code) {
                    this.user.code = '';
                }
                if (this.user.password) {
                    this.user.password = '';
                }
            }
        },
        methods: {
            clickCode() {
                if (!this.user.name) {
                    this.$toast({
                        position: 'top',
                        message: '请先填写手机号码'
                    });
                    return
                }
                if (!app.util.validate('telephone', this.user.name)) {
                    this.$toast({
                        position: 'top',
                        message: '请正确填写手机号码'
                    });
                    return
                }
                app.ajax.get(app.config.setting.serverMobile + app.config.api.mobile.code + this.user.name, {}, (res) => {
                    Object.assign(this.user, {code: res.data});
                    this.showCount = true;
                    this.countDown();
                });
            },
            click() {
                if (!this.user.name || !app.util.validate('telephone', this.user.name)) {
                    this.$toast({
                        position: 'top',
                        message: '请正确填写手机号码'
                    });
                    return
                }
                if (!this.user.code) {
                    this.$toast({
                        position: 'top',
                        message: '验证码不得为空'
                    });
                    return
                }
                if (!this.user.password || !app.util.validate('password', this.user.password)) {
                    this.$toast({
                        position: 'top',
                        message: '密码输入错误！'
                    });
                    return
                }
                app.ajax.put(app.config.setting.serverMobile + app.config.api.account.reset, {
                    name: this.user.name,
                    code: this.user.code,
                    password: app.util.md5(this.user.password)
                }, (res) => {
                    if (res.s === 0) {
                        this.$toast('成功');
                        setTimeout(() => {
                            this.$router.push({name: 'login', params: {name: this.user.name}})
                        }, 2000)
                    }
                });
            },
            countDown() {
                this.count = 150;
                let countInterval = setInterval(() => {
                    this.count--;
                    if (this.count === 0) {
                        clearInterval(countInterval);
                        this.showCount = false;
                    }
                }, 1000)
            }
        }
    }
</script>
<style>
    .password-find {
        backgroud: rgba(112, 112, 112, 0.4);
    }

    .password-find:after {
        content: "";
        background: inherit;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        filter: blur(3px);
    }

    .password-find .mint-cell-wrapper {
        padding: 0 20px;
    }

    .password-find .c-wrap {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
        z-index: 11;
    }

    .password-find .card a {
        background-color: #fff;
        position: relative;
    }

    .password-find .card a:nth-child(3) {
        margin-top: 10px;
    }

    .password-find a:-webkit-any-link {
        color: orangered;
    }

    .password-find .card {
        width: 100%;
        margin: 0;
    }

    .password-find input {
        background-color: inherit;
    }

    .password-find .mint-cell {
        background: inherit;
    }

    .password-find .mint-cell-wrapper {
        background-position: bottom left;
        background-origin: padding-box;
    }

    .password-find .mint-cell-title {
        text-align: justify;
        text-justify: distribute-all-lines; /*ie6-8*/
        text-align-last: justify; /* ie9*/
        -moz-text-align-last: justify; /*ff*/
        -webkit-text-align-last: justify; /*chrome 20+*/
        margin-right: 5%;
    }

    .password-find .mint-field .mint-cell-value {
        width: 70%;
        margin-right: 0;
    }

    .password-find .mint-field-core {
        /*color: rgba(255, 255, 255, .8);*/
    }

    .password-find .card .mint-button--primary {
        /*width: 100%;*/
        margin-top: 0;
    }

    .password-find .card p .mint-button {
        height: 20px;
    }

    .password-find .card p .mint-button--normal {
        padding: 0 5px 0 0;
    }

    .password-find .mint-field-other .mint-button--normal {
        padding: 0;
    }

    .password-find .mint-cell-text {
        color: #707070;
    }
</style>
